<template>
  <div class="login-container">
    <img src="../../assets/logo.png" width="422px" style="margin-top:100px" />
    <el-form class="form-container" ref="form" :model="form" size="mini">
      <el-form-item class="form-item-container">
        <label>Student No.</label>
        <el-input v-model="form.stu_no" placeholder="Username"></el-input>
      </el-form-item>
      <el-form-item class="form-item-container" style="margin-top:10px">
        <label>Password</label>
        <el-input
          v-model="form.password"
          placeholder="Password"
          show-password
          @keyup.13.native="clickEnterEvent"
        ></el-input>
      </el-form-item>
      <el-form-item class="btn-login-container">
        <el-button
          type="text"
          @click="onLogin"
          style="width:100%;color:white"
          :disabled="ready"
          >Log in</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import urls from "../../utils/urls";
import http from "../../utils/http";
import Cryptojs from "crypto-js";
export default {
  name: "Login",
  data() {
    return {
      form: {
        stu_no: "",
        password: "",
        id: ""
      },
      ready: false
    };
  },
  methods: {
    //设置返回MD5后的串
    mD5Method(str) {
      return Cryptojs.MD5(str).toString();
    },
    clickEnterEvent() {
      if (this.form.stu_no != "" && this.form.password != "") {
        this.onLogin();
      } else {
        alert("Student number or password cannot be empty.");
      }
    },
    onLogin() {
      // button的状态设置为true不可点击
      this.ready = true;

      // 对学号和密码进行检查如果没有输入不进行跳转
      if (this.form.stu_no == "" || this.form.password == "") {
        alert("Student number or password cannot be empty.");
        this.ready = false;
        return;
      }
      var url = urls.Login;
      var data = {
        stu_no: this.form.stu_no,
        pwd: this.form.password
      };
      http.request(url, data, this.success, this.fail);
    },
    success(response) {
      // button的状态设置为false可点击
      this.ready = false;
      window.sessionStorage.setItem("token", response.token);
      localStorage.setItem("user", JSON.stringify(response));
      this.$router.push(
        response["is_admin"]
          ? { path: "/StuList" }
          : { path: "/transcripts/unofficial" }
      );
    },
    fail(msg) {
      // button的状态设置为false可点击
      this.ready = false;
    }
  }
};
</script>
<style lang="less" scoped>
.login-container {
  overflow: hidden;
  height: 100%;
}
.form-container {
  background: #f5f5f5;
  position: relative;
  width: 50%;
  max-width: 500px;
  margin: 20px auto 0px auto;
  overflow: hidden;
  border: solid #e3e3e3 1px;
  border-radius: 4px;
}
.form-item-container {
  align-items: left;
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 28px;
  font-weight: 700;
  margin-top: 10px;
}
.el-form-item {
  margin-bottom: 0px;
}
.btn-login-container {
  border-radius: 4px;
  background-color: #594950;
  margin: 20px 10px 10px 10px;
}
</style>
